<template>
  <div
    :style="{
        textShadow: textShadow,
        color: color,
    }"
  >
    {{text}}
  </div>
</template>

<script>
export default {
    props: {
        text: {
            type: String,
            default: 'Hello World'
        },
        color: {
            type: String,
            default: '#FFFFFF',
        },
        borderColor: {
            type: String,
            default: '#000000',
        },
        borderWidth: {
            type: Number,
            default: 1,
        }
    },
    computed: {
        textShadow() {
            const { borderColor, borderWidth } = this;
            return borderColor + ' ' + borderWidth + 'px 0 0, '
                + borderColor + ' 0 ' + borderWidth + 'px 0, '
                + borderColor + ' -' + borderWidth + 'px 0 0, '
                + borderColor + ' 0 -' + borderWidth + 'px 0';
        }
    }
}
</script>

<style>

</style>